<template>
	<view class="add_project">
		<!-- #ifndef H5 -->
		<topTitle :styles="{back:true,title:'加钟',color:'#fff'}" />
		<!-- #endif -->
		<view class="tab_list">
			<view :class="[{'tabs_active':current == 0}]" @click="changeTabs(true)">
				项目升级
			</view>
			<view :class="[{'tabs_active':current == 1}]" @click="changeTabs(false)">
				项目加钟
			</view>
		</view>
		<view class="content" v-show="current == 0">
			<view class="have">
				<view class="title">
					请选择要升级的原项目
				</view>
				<fui-radio-group name="radio" v-if="constList.length > 0" v-model="val" @change="change">
					<view class="fui-list__item" v-for="(item,index) in orderInfo" :key="index">
						<fui-label>
							<view class="fui-align__center">
								<fui-radio color="#1ace6b" :value="`${index}`" checked></fui-radio>
								<view class="have_item">
									<view class="left">
										<image :src="item.upgrade_product.cover" mode=""></image>
									</view>
									<view class="right">
										<view class="name">
											{{item.upgrade_product.name}}
										</view>
										<view class="desc">
											{{item.upgrade_product.desc}}
										</view>
										<view class="price_time">
											<view class="price">￥{{item.upgrade_product.price}}</view>
											<view class="time">
												<view class="image">
													<image src="/static/images/time.png" mode=""></image>
												</view>
												{{item.upgrade_product.duration}}分钟
											</view>
										</view>
									</view>
								</view>
							</view>
						</fui-label>
					</view>
				</fui-radio-group>
			</view>
			<view class="upgrade_title">
				将<text style="color:#1ace6b;">{{orderInfo[index].upgrade_product.name}}</text>升级为以下项目：
			</view>
			<view class="project_list">
				<view class="project_item" v-for="(item,index) in projectList" :key="index">
					<view class="left">
						<image :src="item.cover" mode=""></image>
					</view>
					<view class="right">
						<view class="title">
							<view class="name">
								{{item.name}}
							</view>
						</view>
						<view class="function">
							<view class="desc_text">
								{{item.desc}}
							</view>
						</view>
						<view class="bottom">
							<view class="price">￥<font>{{item.price}}</font>
							</view>
							<view class="time">
								<image style="width: 14px;height: 14px;margin-right: 2px;" src="/static/images/time.png"
									mode=""></image>
								<font>{{item.duration}}分钟</font>
							</view>
						</view>
						<view class="check">
							<view class="difference">需补差价￥<text>{{item.difference}}</text> </view>
							<view class="upgrade" @click="upgrade(item)">
								立即升级
							</view>
						</view>
					</view>
				</view>
				<view class="not_data" v-if="projectList.length == 0 ">
					无可升级项目
				</view>
			</view>
		</view>
		<view class="content" v-show="current == 1">
			<view class="project_list">
				<view class="project_item" v-for="(item,index) in constList" :key="index">
					<view class="left">
						<image :src="item.cover" mode=""></image>
					</view>
					<view class="right">
						<view class="title">
							<view class="name">
								{{item.name}}
							</view>
						</view>
						<view class="function">
							<view class="desc_text">
								{{item.desc}}
							</view>
						</view>
						<view class="bottom">
							<view class="price">￥<font>{{item.price}}</font>
							</view>
							<view class="time">
								<image style="width: 14px;height: 14px;margin-right: 2px;" src="/static/images/time.png"
									mode=""></image>
								<font>{{item.duration}}分钟</font>
							</view>
						</view>
						<view class="check">
							
						</view>
					</view>
					<view class="">
						<fui-input-number v-model="item.num" custom backgroundColor="#FFF" :min="0" :size="30" :width="60" margin="0">
							<fui-icon name="minussign" :size="48" color="#1ace6b"></fui-icon>
							<template v-slot:plus>
								<fui-icon name="plussign-fill" :size="48" color="#1ace6b"></fui-icon>
							</template>
						</fui-input-number>
					</view>
				</view>
			</view>
		</view>
		<view class="submit" v-show="current == 1">
			<view class="all_price">合计：<text>￥{{allPrice.toFixed(2)}}</text></view>
			<view class="submit_button" @click="payment">提交</view>
		</view>
		<fui-modal 
		:maskClosable="true" 
		:buttons="buttons" 
		@cancel="closeModal()" 
		:show="show"  
		radius="40" 
		title="温馨提示" 
		descr="您确定升级该项目吗？"
		@click="takeOrder"></fui-modal>
		<fui-modal
		:maskClosable="true" 
		:buttons="buttons" 
		@cancel="close()" 
		:show="addShow"  
		radius="40" 
		title="温馨提示" 
		descr="您确定加钟该项目吗？"
		@click="addProject"></fui-modal>
		<fui-toast ref="toast"></fui-toast>
	</view>
</template>

<script>
	import topTitle from "@/components/topTitle.vue"
	export default {
		components:{
			topTitle
		},
		data() {
			return {
				page: 1,
				limit: 100,
				constList:[],
				projectList: [],
				current: 0,
				orderInfo: [],
				type: false,
				val: '',
				index:0,
				buttons:[
					{
						text:'取消',
						color:'#666',
						background:'#eee',
						plain: false,
					},
					{
						text:'确定',
						color:'#fff',
						background:'#1ace6b',
						 plain: false,
					}
				],
				show:false,
				params:{},		//提交参数
				addShow:false,
				
			};
		},
		onLoad(options) {
			if (options.data) {
				// this.type = options.index;
				// this.current = this.type;
				this.orderInfo = JSON.parse(options.data)
				this.technicianId = options.id
				console.log(options.data,'-----------------------data')
				this.getProjectList()
			}
		},
		computed:{
			allPrice(){
				var price = 0
				this.constList.forEach((item, index) => {
					if (item.num != 0) {
						price += Number(item.num) * Number(item.price)
					}
				})
				return price
			}
		},
		methods: {
			payment(){
				console.log(this.constList,'-----------------------123')
				this.addShow = true;
			},
			//加项
			addProject(e){
				uni.showLoading({
					title:'请稍候...'
				})
				this.addShow = false;
				let params = {
					"order_id": this.orderInfo[0].order_id, 
					"products": [], 
					"user_remark": "加项" 
				}
				let data = this.constList.filter(el=>{
					return el.num > 0
				})
				console.log(data,'-----------------data')
				
				data.forEach((item,index)=>{
					params.products.push({
						product_id:item.id,
						num:item.num
					})
				})
				console.log(params,'------------------------------params')
				if(e.index == 1){
					this.$http({
						url:`/api/product/charge_order/create`,
						method:'post',
						data:params, 
						success:result=>{
							console.log(result,'-------------------------result')
							uni.navigateTo({
								url:`/pages/orders/addItem/addItem?data=${JSON.stringify(result.data.info)}&technician_id=${this.technicianId}`
							})
						}
					})
				}
			},
			close(){
				this.addShow = false;
			},
			//获取服务项目
			getProjectList() {
				this.$http({
					url: `/api/product/list?page=${this.page}&limit=${this.limit}&technician_id=${this.technicianId}&type=2`,
					method: 'get',
					success: result => {
						console.log(result)
						result.data.list.forEach((item,index)=>{
							item.num = 0
						})
						this.projectList = result.data.list
						this.constList = result.data.list
						
					}
				})
			},
			changeTabs(boolean) {
				// if(this.type == 1){
				// 	return false;
				// }
				if (boolean) {
					this.current = 0
				} else {
					this.current = 1
				}
			},
			change(e) {
				console.log(e, '--------------------e')
				this.val = e.detail.value
				this.index = e.detail.value
				let data = this.constList;
				var arr = data.filter(el=>{
					return Number(el.price) - Number(this.orderInfo[this.index].upgrade_order_price) > 0 
				})
				arr.forEach((item,index)=>{
					item.difference = Number(item.price) - Number(this.orderInfo[this.index].upgrade_order_price)
				})
				this.projectList = arr
				this.params = {
					order_id:this.orderInfo[this.index].order_id,
					order_info_id:this.orderInfo[this.index].id
				}
			},
			//升级
			upgrade(data){
				console.log(data)
				this.params.product_id = data.id
				this.difference = data.difference
				this.show = true;
			},
			closeModal(){
				this.show = false;
			},
			takeOrder(e){
				this.show = false;
				if(e.index == 1){
					this.params.pay_type = 'weixin'
					this.$http({
						url:`/api/product/upgrade_order/create`,
						method:'post',
						data:this.params,
						success:result=>{
							console.log(result,'-----------------------创建订单')
							uni.navigateTo({
								url:`/pages/orders/addItem/addItem?data=${JSON.stringify(result.data.info)}`
							})
							// if(result.code == 200){
							// 	let url = result.data.scheme_url
							// 	// #ifdef H5
							// 	if (uni.getSystemInfoSync().platform =='android') { //android终端
							// 		window.open(url);
							// 	} else if (uni.getSystemInfoSync().platform == "ios") { //ios终端
							// 		window.location.href = url;
							// 	}
							// 	// #endif
							// 	// #ifdef APP-PLUS
							// 	plus.runtime.openURL(encodeURI(url), err => {
							// 		console.log(err)
							// 	})
							// 	// #endif
							// }
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.add_project {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		.tab_list {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;

			>view {
				padding: 20upx;
				margin: 0 40upx;
			}

			.tabs_active {
				font-weight: bold;
				color: #1ace6b;
			}
		}

		.content {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin: 0 20upx;

			.fui-list__item {
				width: 100%;
				padding: 0 40upx;
				box-sizing: border-box;
			}

			.have {
				background-color: #fff;
				border-radius: 20upx;
				.title {
					font-size: 25upx;
					padding: 20upx;
				}
			}

			.have_item {
				flex: 1;
				padding: 20upx 10upx;
				margin-left: 40upx;
				display: flex;
				background-color: #fff;

				.left {
					width: 100px;
					height: 75px;

					>image {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					flex: 1;
					margin-left: 20upx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-size: 32upx;
						font-weight: bold;
						color: #000;
					}

					.desc {
						font-size: 22upx;
						color: #7b7b7b;
					}

					.price_time {
						display: flex;
						align-items: center;
						justify-content: space-between;
						color: #fd5c5b;

						.price {
							font-weight: bold;
						}

						.time {
							display: flex;
							align-items: center;
							margin-right: 20upx;
							font-size: 22upx;
							color: #7b7b7b;

							.image {
								width: 14px;
								height: 14px;
								margin-right: 5upx;

								>image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}
			}
			.upgrade_title{
				margin: 20upx 0;
				padding:10upx;
				font-size: 25upx;
				>text{
					margin: 0 10upx;
					font-size: 32upx;
					font-weight: bold;
				}
			} 
			.project_list {
				flex: 1;
				padding-bottom: 130upx;
				.project_item {
					flex: 1;
					padding:20upx;
					display: flex;
					align-items: center;
					justify-content: space-around;
					background: #fff;
					border-radius: 20upx;
					margin-bottom: 10px;
					.left {
						width: 180upx;
						height: 140upx;
						>image {
							width: 100%;
							height: 100%;
							border-radius: 10upx;
						}
					}

					.right {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;
						margin-left: 20upx;
						position: relative;
						.title {
							font-size: 18px;
							font-weight: bold;
							overflow: hidden;
							flex-wrap: nowrap;
							display: flex;
							align-items: center;
							justify-content: space-between;

							>.name {
								>text {
									font-size: 12px;
									background-color: #eafff0;
									color: #23c373;
									padding: 2px 3px;
									border-radius: 10px;
									margin-left: 5px;
								}
							}

							>.count {
								>text {
									margin-right: 5px;
									font-size: 10px;
									color: #999;
									font-weight: 400;
								}
							}
						}

						.function {
							color: #666;
							// height: 40%;
							margin-top: 5px;
							display: flex;
							justify-content: space-between;

							.desc_text {
								font-size: 22upx;
								margin-right: 10upx;
							}

							.convention {
								padding: 5px;
								background: #24D572;
								border-radius: 7px;
								color: #fff;
								// margin-top: 15px;
								// margin-bottom: 12px; 
								margin-right: 7px;
							}
						}

						.bottom {
							display: flex;
							align-items: center;
							margin-top: 20upx;
							.price {
								color: #fd5c5b;
								font-weight: bold;
								display: flex;
								align-items: baseline;
								font-size: 22upx;
								>font {
									font-size: 32upx;
								}
								.cost {
									font-size: 10px;
									text-decoration: line-through;
									font-weight: 400;
									color: #666;
									margin-left: 10rpx;
								}
							}

							.time {
								vertical-align: middle;
								align-items: center;
								// margin-top: 33px;
								font-size: 10px;
								display: flex;
								margin-left: 30rpx;
							}

						}
						.check{
							position: absolute;
							right: 0;
							font-size: 25upx;
							color: #fd5c5b;
							.difference{
								padding: 10upx 0;
								font-size: 22upx;
								>text{
									font-size: 28upx;
									font-weight: bold;
								}
							}
							.upgrade{
								padding: 10upx 0;
								text-align: center;
								background: linear-gradient(90deg, #18b568 0%, #2ef1b5 100%);
								color: #fff;
								border-radius: 40upx;
							}
						}
					}
				}
				.not_data{
					margin-top: 200upx;
					color: #7b7b7b;
					text-align: center;
				}
			}
			
		}
		.submit{
			width: 100%;
			height: 100upx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			margin-bottom: var(--window-bottom);
			display: flex;
			justify-content: space-between;
			align-items: center;
			>view{
				margin:0 10px ;
			}
			.all_price{
				font-size:14px;
				// font-weight: bold;
				color: #fb3535;
				text{
					font-size: 18px;
					font-weight: bold;
				}
			}
			.submit_button{
				width: 162px;
				height: 44px;
				line-height: 44px;
				border-radius: 5px;
				background: #24d576;
				color: #fff;
				font-size: 16px;
				text-align: center;
			}
		}
	}
	.fui-align__center{
		display: flex;
		align-items: center;
	}
</style>
